<template>
    <div class="task-card-wrapper">
        <div class="cardbox">
            <div class="task-no">{{ task.taskNo }}</div>
            <div class="libox">
                <div class="liflex">
                    <div class="double-icon">
                        <van-icon name="friends-o" size="18" color="#666" />
                        <!-- <van-icon name="friends-o" size="18" color="#666" class="icon-overlap" /> -->
                    </div>
                    <div class="org-name">{{ task.orgName }}</div>
                </div>
                <div class="liflex">
                    <van-icon name="calendar-o" size="18" color="#666" />
                    <div class="date-range">{{ formatDate(task.beginDate , 'yyyy-MM-dd')}} ~ {{ formatDate(task.endDate , 'yyyy-MM-dd') }}</div>
                </div>
            </div>
            <div class="libox">
                <div class="liflex progress-item">
                    <van-icon name="star-o" size="18" color="#666" />
                    <div class="progress-wrapper">
                        <div class="progress-bar">
                            <!-- 灰色背景条 -->
                            <div class="progress-bg"></div>
                            <!-- 进度填充条 -->
                            <div 
                                class="progress-fill"
                                :style="{ 
                                    width: 
                                        (task.propertyAmount > 0) 
                                            ? (( (task.stocktakingAmount || 0) / task.propertyAmount ) * 100) + '%' 
                                            : '0%' 
                                }"
                            ></div>
                        </div>
                        <span class="progress-text">
                            {{ task.stocktakingAmount || 0 }}/{{ task.propertyAmount || 0 }}
                        </span>
                    </div>
                </div>
                <div class="liflex progress-item">
                    <van-icon name="passed" size="18" color="#666" />
                    <div class="progress-wrapper">
                        <div class="progress-bar">
                            <div 
                                class="progress-fill" 
                                :style="{ 
                                    width: 
                                        (task.abnormalAmount > 0) 
                                            ? (((task.reviewAmount || 0) / task.abnormalAmount) * 100) + '%' 
                                            : '0%' 
                                }"
                            ></div>
                        </div>
                        <span class="progress-text">
                            {{ task.reviewAmount || 0 }}/{{ task.abnormalAmount || 0 }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="libox">
                <div class="liflex">
                    <van-icon name="gold-coin-o" size="18" color="#666" />
                    <div class="count-text">{{ task.propertyAmount }}</div>
                </div>
                <div class="liflex">
                    <van-icon name="clock-o" size="18" color="#666" />
                    <div class="count-text">{{ task.stocktakingAmount || '-' }}</div>
                </div>
            </div>
            <div class="divider"></div>
            <div class="button-group">
                <van-button 
                    plain 
                    color="#3772ff" 
                    class="action-btn" 
                    size="small"
                    @click="$emit('terminate', task)"
                >
                    终止任务
                </van-button>
                <van-button 
                    color="#3772ff" 
                    class="action-btn" 
                    size="small"
                    @click="$emit('edit', task)"
                >
                    编辑
                </van-button>
                <van-button 
                    color="#3772ff" 
                    class="action-btn" 
                    size="small"
                    @click="$emit('start', task)"
                >
                    开始盘点
                </van-button>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    name: 'vCard',
    props: {
        task: {
            type: Object,
            required: true,
            default: () => ({
                taskNo: '',
                orgName: '',
                startDate: '',
                endDate: '',
                progress1: { current: 0, total: 0 },
                progress2: { current: 0, total: 0 },
                count1: 0,
                count2: 0
            })
        }
    },
    data() {
        return {}
    },
    methods: {
        // 将时间戳转
        formatDate(timestamp) {
            if (!timestamp) return '-';
            const date = new Date(Number(timestamp));
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    },
}
</script>

<style scoped>
.task-card-wrapper {
    margin-bottom: 12px;
}

.cardbox {
    width: 100%;
    background: #fff;
    padding: 15px;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.task-no {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
}

.libox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0;
    width: 100%;
}

.liflex {
    display: flex;
    align-items: center;
    flex: 1;
}

.double-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.icon-overlap {
    position: absolute;
    left: 8px;
    z-index: 1;
}

.org-name {
    margin-left: 15px;
    font-size: 0.96em;
    color: #666;
}

.date-range {
    margin-left: 8px;
    font-size: 0.96em;
    color: #666;
}

.progress-item {
    flex: 1;
}

.progress-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 8px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background-color: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
    margin-right: 8px;
}

.progress-fill {
    height: 100%;
    background-color: #999;
    border-radius: 3px;
    transition: width 0.3s;
}

.progress-text {
    font-size: 0.9em;
    color: #666;
    white-space: nowrap;
}

.count-text {
    margin-left: 8px;
    font-size: 0.96em;
    color: #666;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: #f2f2f2;
    margin: 12px 0;
}

.button-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.action-btn {
    min-width: 90px;
    height: 32px;
    font-size: 0.96em;
    border-radius: 4px;
}
</style>